import { defineComponent, reactive,ref} from "vue";
import styles from "./search.module.less";
import LPopup from "@/components/public/lPopup/lPopup";
export default defineComponent({

  emits: ["cancel", "confirm"],
  setup(props, { emit ,expose}){
    const state = reactive({
        list:[
          "保司保单号",
          "与被保人关系",
          "被保人姓名",
          "被保人证件号",
          "状态",
        ],
        insured_people:[
        ],
        order_status:"",
    } as any)


    const searchPopupRef = ref(null as any);
    const open = (e:any)=>{
     if(e)
     {
        state.insured_people = e;
     }

     searchPopupRef.value.open();
    }
    const close = ()=>{
      searchPopupRef.value.close();
    }
    expose({
       open,
       close,
    })
    const Components = () => (
      <LPopup title="查看被保人" ref={searchPopupRef}>
      <div class={styles.orderSearch}>
          <div class={styles.orderBody}>
            <div class={styles.orderRow}>
            {
              state.list.map((item:any,index:any)=>{
                 return <div class={[styles["orderRowContent"],(index == 0 || index == 3) && styles["orderRowIdContent"],
                 (index == 1 || index == 2) && styles["orderRowNameContent"]
                 ]}>
                    {item}
                 </div>
              })
            }
            </div>
            {
              state.insured_people.map((item:any)=>{
                 return    <div class={styles.orderRow}>
                       <div class={[styles["orderRowBodyContent"],styles["orderRowIdContent"]]}>
                         {item.order_no}
                      </div>
                      <div class={[styles["orderRowBodyContent"],styles["orderRowNameContent"]]}>
                         {item.identity.label}
                      </div>
                      <div class={[styles["orderRowBodyContent"],styles["orderRowNameContent"]]}>
                         {item.name}
                      </div>
                      <div class={[styles["orderRowBodyContent"],styles["orderRowIdContent"]]}>
                         {item.id_no}
                      </div>
                      <div class={styles.orderRowBodyContent}>
                         {item.order_status.label}
                      </div>
                 </div>
              })
            }
          </div>
        </div>
      </LPopup>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components />;
  },
});